<template>
  <div>
    <el-form class="common-border pl10 pt10 pr10 mb10" :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px" label-position="right">
      <div>
        <el-form-item label="平台订单号" prop="platOrderNo">
          <el-input
            v-model="queryParams.platOrderNo"
            placeholder="平台订单号"
            clearable
            style="width:200px"
            :maxlength="50"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="始发地" prop="origin" label-width="70px">
          <el-input
            v-model="queryParams.origin"
            placeholder="始发地"
            clearable
            style="width:200px"
            :maxlength="50"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="目的地" prop="destination" label-width="70px">
          <el-input
            v-model="queryParams.destination"
            placeholder="目的地"
            clearable
            style="width:200px"
            :maxlength="50"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="货主订单号" prop="shipperOrderNumber">
          <el-input
            v-model="queryParams.shipperOrderNumber"
            placeholder="货主订单号"
            clearable
            style="width:220px"
            :maxlength="50"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="运单单号" prop="waybillNumber">
          <el-input
            v-model="queryParams.waybillNumber"
            placeholder="运单单号"
            clearable
            style="width:200px"
            :maxlength="50"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="发货方" prop="shipper" label-width="70px">
          <el-input
            v-model="queryParams.shipper"
            placeholder="发货方"
            clearable
            style="width:200px"
            :maxlength="50"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="收货方" prop="shipTo" label-width="70px">
          <el-input
            v-model="queryParams.shipTo"
            placeholder="收货方"
            clearable
            style="width:200px"
            :maxlength="50"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="创建时间" prop="creatTime">
          <el-date-picker
            style="width:220px"
            v-model="queryParams.creatTime"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" size="mini" @click="handleQuery">查询</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-row class="common-border pl5 pt5 pb5 mb10">
      <el-col :span="1.5">
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="list"
      v-table-height="{bottomOffset: 85,callback: height => tableHeight = height}"
      :max-height="tableHeight"
    >
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="平台订单号" min-width="120" align="center" prop="platOrderNo" :show-overflow-tooltip="true" />
      <el-table-column label="货物名称" min-width="120" align="center" prop="goodsType" :show-overflow-tooltip="true" />
      <el-table-column label="数量（件）" min-width="120" align="center" prop="count" :show-overflow-tooltip="true" />
      <el-table-column label="重量（吨）" min-width="120" align="center" prop="weight" :show-overflow-tooltip="true" />
      <el-table-column label="体积（立方）" min-width="120" align="center" prop="volume" :show-overflow-tooltip="true" />
      <el-table-column label="发货方" min-width="120" align="center" prop="shipper"></el-table-column>
      <el-table-column label="收货方" min-width="120" align="center" prop="shipTo" :show-overflow-tooltip="true" />
      <el-table-column label="始发地" min-width="120" align="center" prop="origin" :show-overflow-tooltip="true" />
      <el-table-column label="目的地" min-width="120" align="center" prop="destination" :show-overflow-tooltip="true" />
      <el-table-column label="货主订单号" min-width="120" align="center" prop="shipperOrderNumber" :show-overflow-tooltip="true" />
      <el-table-column label="发货网点" min-width="120" align="center" prop="shippingBranch" :show-overflow-tooltip="true" />
      <el-table-column label="运单单号" min-width="120" align="center" prop="waybillNumber" :show-overflow-tooltip="true" />
      <el-table-column label="运单状态" min-width="120" align="center" prop="waybillStatus" :show-overflow-tooltip="true" />
      <el-table-column label="创建人" min-width="120" align="center" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center"  fixed="right"  width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleDetail"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleEdit"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
          >启用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
    <Add ref="add" :key="`add${autoKey}`" @close="autoKey++" />
    <!-- <Detail ref="detail" :key="`detail${autoKey}`" @close="autoKey++" /> -->
    <!-- <Edit ref="edit" :key="`edit${autoKey}`" @close="autoKey++" /> -->
  </div>
</template>

<script>
import { list, forceLogout } from "@/api/monitor/online";
import Add from './components/add.vue'
// import Detail from './components/detail.vue'
// import Edit from './components/edit.vue'
import { myCustomerList } from "@/api/customer/myCustomer";

export default {
  name: "individualDriver",
  components: {
    Add,
    // Detail,
    // Edit
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      pageNum: 1,
      pageSize: 10,
      // 查询参数
      queryParams: {
        platOrderNo: undefined,
        driverType: undefined,
        address: undefined
      },
      tableHeight: 0,
      cardHeight: 0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      autoKey: 0
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    /** 查询登录日志列表 */
    getList() {
      // this.loading = true;
      // myCustomerList(this.queryParams).then(response => {
      //   this.list = response.rows;
      //   this.total = response.total;
      //   this.loading = false;
      // });
      this.list = [
        {
          platOrderNo: 'O3344555',
          goodsType: '食品',
          goodsName: '大米',
          driverLlicenseCategory: 'A1',
          count: 5,
          weight: 5,
          volume: 5,
          package: '纸箱',
          goodsDesc: '黑色，1厘米，三角',
          dueDate:'2021.08.10',
          orderNumber:'4',
          owningVehicle: 5,
          registeredCapital: 50,
          address: '广东深圳南山',
          duties: 'CEO',
          goodsOwner: '王军',
          telephone: '13822234444',
          email: '87588889@qq.com',
          startDate: '2021.08.10',
          listingTime: '2021.08.10',
          contractEndDate: '2021.08.10',
          createBy: '周先生',
          createTime:'2021.08.10 17:00:00',
          origin: '广州天河',
          destination: '北京海淀',
          shipper: '广州XX公司',
          shipTo: '深圳XX公司',
          shipperOrderNumber: 'H34333',
          shippingBranch: 'C网点',
          waybillNumber: 'Y5554443',
          waybillStatus: '待提货',
        }
      ]
      this.loading = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAdd() {
      this.$refs.add.showDialog()
    },
    handleEdit() {
      // this.$refs.edit.showDialog()
    },
    handleDetail() {
      // this.$refs.detail.showDialog()
    },
    handleDelete() {

    }
  }
};
</script>

